<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Convert Images to Base64</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />

    <!-- Javascripts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.2.0/diff.js"></script>

    <style>
      #diff {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Convert Images to Base64</h1>
    <input type="file" id="fileInput" accept=".html" />
    <button id="convertButton">Convert</button>
    <a id="downloadLink" style="display: none">Download Converted HTML</a>
    <div id="diff"></div>
    <script>
      document.getElementById('convertButton').addEventListener('click', async () => {
        const fileInput = document.getElementById('fileInput')
        if (fileInput.files.length === 0) {
          alert('Please select a file!')
          return
        }

        const file = fileInput.files[0]
        const reader = new FileReader()

        reader.onload = async (event) => {
          const originalHtml = event.target.result
          const parser = new DOMParser()
          const doc = parser.parseFromString(originalHtml, 'text/html')
          const images = doc.querySelectorAll('img')

          for (const img of images) {
            const url = img.src
            try {
              const response = await fetch(url)
              const blob = await response.blob()
              const base64 = await convertBlobToBase64(blob)
              img.src = base64
            } catch (error) {
              console.error('Error converting image:', error)
            }
          }

          const serializer = new XMLSerializer()
          const updatedHtml = serializer.serializeToString(doc)

          // Create a Blob from the updated HTML
          const blob = new Blob([updatedHtml], { type: 'text/html' })

          // Create a download link
          const downloadLink = document.getElementById('downloadLink')
          downloadLink.href = URL.createObjectURL(blob)
          downloadLink.download = 'converted.html'
          downloadLink.style.display = 'block'
          downloadLink.textContent = 'Download Converted HTML'

          // Show the diff
          showDiff(originalHtml, updatedHtml)
        }

        reader.readAsText(file)
      })

      function convertBlobToBase64(blob) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onloadend = () => resolve(reader.result)
          reader.onerror = reject
          reader.readAsDataURL(blob)
        })
      }

      function showDiff(originalHtml, updatedHtml) {
        const diff = Diff2Html.html(Diff.createTwoFilesPatch('Original', 'Converted', originalHtml, updatedHtml), {
          drawFileList: false,
        })
        document.getElementById('diff').innerHTML = diff
      }
    </script>
  </body>
</html>
